<template>
<div>
  <section class="main isPc">
      <section class="prcType">
        <p class="pTitle search">搜索结果如下：</p>
        <div class="info">
          <div class="typeTop" v-if="allList">
            <div class="left">
              排序方式：
              <span @click="getStart(1,'sale_count')" :class="{active:getKey==1}">销量</span>
            <span @click="getStart(2,'goods_price')" :class="{active:getKey==2}">价格</span>
            <span @click="getStart(3,'updated_at')" :class="{active:getKey==3}">新品</span>
            </div>
            <div class="right">
              <span class="num">共{{allNum}}件商品</span>
              <span :class="{none:onNum==1}" class="click pageLeft" @click="lastPage"></span>
              <span>{{onNum}}/{{allPage}}页</span>
              <span :class="{none:onNum==allPage}" class="click pageRight" @click="nextPage"></span>
            </div>
          </div>
          <div class="typeList" v-if="allList"> 
            <ul>
              <router-link :key="item.id" v-for="item in prcList" tag="li" :to="{path:'/prcShow',query: {id:item.id}}">
                  <div v-if="item.goods_number==0" class="prcNone">
                    <p>售罄</p>
                  </div>
                  <img v-lazy="item.goods_logo">
                  <p class="title">{{item.goods_name}}</p>
                  <p class="price">£{{item.goods_price|allPrice}}</p>
              </router-link>
            </ul>
          </div>
          <div class="pageList" v-if="allList">
            <span :class="{none:onNum==1}" class="pageLeft" @click="lastPage"></span>
            <span :class="{active:item==onNum}" v-for="item in pageList" @click="getPage(item)">{{item}}</span>
            <span :class="{none:onNum==allPage}" class="pageRight" @click="nextPage"></span>
          </div>
          
          <div class="noneList" v-if="!allList">
            没有相关商品
          </div>

        </div>
      </section>
    </section>

    <section class="prcTypeWap isWap">
      <p class="wapSearchTitle">搜索结果如下：</p>
      <div class="listTop">
        <span>排序方式：</span>
        <select v-model="wapTab">
          <option value="1">新品</option>
          <option value="2">价格</option>
          <option value="3">销量</option>
        </select>
      </div>
      <div class="typeList" v-if="allList">
        <ul>
          <li v-for="item in prcList">
            <div v-if="item.goods_number==0" class="prcNoneWap">
              <p>售罄</p>
            </div>
            <div class="wapBuy">
              <span class="spanA" @click="wapCartOpen"></span>
              <p class="wapBuyOn"><span class="spanB" @click="PostCart(item)"></span><input v-model="wapBuyNum" type="text" name=""></p>
            </div>
            <a target="_blank" :href="'/prcShow?id='+item.id" >
              <img v-lazy="item.goods_logo">
              <p class="title">{{item.goods_name}}</p>
              <p class="price">£{{item.goods_price|allPrice}}</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="right">
        <span :class="{none:onNum==1}" class="click pageLeft" @click="lastPage"></span>
        <span class="center">{{onNum}}/{{allPage}}</span>
        <span :class="{none:onNum==allPage}" class="click pageRight" @click="nextPage"></span>
      </div>
    </section>
</div>
  
</template>

<script>
import { Swiper, SwiperItem} from 'vux'
import {Get,Post} from '@/config/api.js'
import axios from 'axios'
export default {
  name: 'hello',
  data () {
    return {
      getKey:1,//排列
      swiperItemIndex: 1,
      loadStart:false,
      prcList:[],//商品数据
      prcLoad:true,//判断是否在加载中
      prcNum:20,//加载数量
      prcStart:'updated_at',
      onNum:1,
      allNum:'',//商品总数量
      allPage:1,
      loadShow:false,//加载中
      noMore:false,//没有更新商品
      wapTab:1,//排序方式
      wapBuyNum:1
    }
  },
  components:{
    Swiper, SwiperItem
  },
  computed: {
    allList() {
      if (this.prcList) {
        return true
      } else {
        return false
      }
    },
    pageList() {
      let arr = [];
      for (let i = 0; i < this.allPage; i++) {
        arr.push(i + 1)
      }
      return arr
    }
  },
  mounted(){
      this.getData(this.$route.query.id)

      $(document).on('click','.spanA',function(){
        $('.wapBuyOn').removeClass('on')
        $(this).next('p').addClass('on')
      })

      $(document).on('click','.spanB',function(){ 
        $('.wapBuyOn').removeClass('on')
        $('.wapBuy').removeClass('on')
      })
  },
  watch:{
      '$route.query.id'(val){
          this.getData(val)
      },
      //监控排序方式
      wapTab(){
        if(this.wapTab==1){
          this.prcStart='updated_at'
        }else if(this.wapTab==2){
          this.prcStart='goods_price'
        }else{
          this.prcStart='sale_count'
        }
        this.getPai(1)
      }
  },
  methods:{
    //获取商品
    async getData(val) {
      this.lanMuVal = val
      this.getPai(val)
    },
    getStart(num,val){
      this.getKey=num
      this.prcStart=val
      this.getPai(1)
    },
    //第几页
    async getPai(val) {
      if(this.$route.query.id!=undefined){
        if(this.vCheck()){
            this.$store.dispatch("isLoading",true)
            let reg=await Get('/goods?_include=category,goods_zone,goods_image,goods_describe&is_sale=1&_sort=-'+this.prcStart+'&keyword='+this.lanMuVal+ '&page=' + val,this.$store.state.token)
            this.onNum=reg.meta.pagination.current_page
            this.allNum=reg.meta.pagination.total
            this.allPage=reg.meta.pagination.total_pages
            this.prcList=reg.data
            document.body.scrollTop =0
            this.$store.dispatch("isLoading",false)
          }
      }
    },
    //下一页
    async nextPage() {
      if (this.onNum < this.allPage) {
          this.onNum++
          this.getPai(this.onNum)
      }
    },
    //上一页
    async lastPage() {
      if (this.onNum > 1) {
          this.onNum--
          this.getPai(this.onNum)
      }

    },
    //跳到第几页
    async getPage(val) {
      this.getPai(val)
    },
    //获取banner图片
    async getBanner(){

      if(this.vCheck()){
        let that=this
        axios({
            method: 'get',
            url: this.$store.state.url+'/ads',
            headers: {Authorization:"Bearer "+that.$store.state.token}
          }).then(function(data){
            that.aa=data.data.data
          });
        } 
      },
      //更新购物车信息
    async getNowWap(){
      let reg=await Get('/carts?_sort=id&_pagination=false',this.$store.state.token)
        let all=0
        for(let i=0;i<reg.data.length;i++){
          all+=reg.data[i].amount
        }
        let data={
          num:reg.data.length,
          price:all
        }
        this.$store.dispatch("wapCart",data)
    },
    //加入购物车
    async PostCart(val){
      if(this.vLogin()){
          if(this.wapBuyNum<=val.goods_number){
            let date={
              "goods_id":val.id,
              "goods_count":this.wapBuyNum
            }
            this.$store.dispatch("isLoading",true)
            await Post('/carts',this.$store.state.token,date)
            this.$store.dispatch("isLoading",false)
            alert('加入成功！')
            this.getNowWap()
          }else{
            alert('商品库存不足')
            this.wapBuyNum=val.goods_number
          }
      }else{
        this.$router.push({ path: '/login'})
      }
    },
    wapCartOpen(){
      this.wapBuyNum=1
    },
      
      //加载更多
    loadMore(){
        if(this.prcNum<this.allNum){
          this.prcNum+=10
        }else{
          this.noMore=true
          this.loadShow=false
        }
        
      }
    }
}
</script>

